{% extends 'bootstrap_children.html' %}
{% block ace-content %}
    <script type="text/javascript" src="/static/ckeditor/ckeditor.js"></script>
    <link href="/static/bootstrap/dist/css/bootstrap-multiselect.css" rel="stylesheet">
    <script src="/static/bootstrap/dist/js/bootstrap-multiselect.js"></script>
{% endblock %}
{% block page-content %}
    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header"><i class="fa   fa-floppy-o"></i> <code>Wiki</code>知识</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <i class="fa    fa-pencil-square-o"> </i> 修改文章
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-lg-10">
                                <form role="form" class="main form-horizontal">{% csrf_token %}

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">标题</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="title" placeholder="文章标题"
                                                       value="{{ article.title }}" class="input-xlarge" required/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">内容</label>
                                            <div class="col-sm-10">
                                                <textarea id="content" class="ckeditor">{{ article.content }}</textarea>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">分类</label>
                                            <div class="col-sm-2">
                                                <select class="form-control" name="category" id="select_category"
                                                        required>
                                                    <option value="" name="category">请选择分类</option>
                                                    {% for ds in categoryList %}
                                                        {% if article.category.id == ds.id %}
                                                            <option value="{{ ds.id }}" name="category"
                                                                    selected="selected">{{ ds.name }}</option>
                                                        {% else %}
                                                            <option value="{{ ds.id }}"
                                                                    name="category">{{ ds.name }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">标签</label>
                                            <div class="col-sm-2 ">
                                                <select multiple class="form-control" id="select_tag" required>
                                                    <option value="">请选择标签</option>
                                                    {% for ds in tagList %}
                                                        {% if ds.id in article.tag %}
                                                            <option value="{{ ds.id }}" name="tag"
                                                                    selected="selected">{{ ds.name }}</option>
                                                        {% else %}
                                                            <option value="{{ ds.id }}"
                                                                    name="tag">{{ ds.name }}</option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label"></label>
                                            <div class="col-sm-2">
                                                <button type="button" id="button" onclick="EditWikiArticle(this)"
                                                        class="btn btn-default">修改
                                                </button>
                                            </div>
                                        </div>
                                </form>
                            </div>

                            <!-- /.row (nested) -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <div class="panel-footer"></div>
                    <!-- /.panel -->
                </div>
            </div>

        </div>

        <script type="text/javascript">

            $(document).ready(function () {
                $('#select_tag').multiselect({
                    enableClickableOptGroups: true,
                    enableCollapsibleOptGroups: true,
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    buttonWidth: '205px'
                });
                $('#select_category').multiselect({
                    enableClickableOptGroups: true,
                    enableCollapsibleOptGroups: true,
                    includeSelectAllOption: true,
                    enableFiltering: true,
                    buttonWidth: '205px'
                });
            });

            CKEDITOR.replace('content', {
                filebrowserUploadUrl: '/wiki/upload/',
                height: '500px',
                width: '100%',
            });

            function getSelectValue(id) {
                var select = document.getElementById(id);
                var val = [];
                for (i = 0; i < select.length; i++) {
                    if (select.options[i].selected) {
                        val.push(select[i].value);
                    }
                }
                return val;
            }

            function EditWikiArticle(obj) {
                tags = getSelectValue("select_tag")
                categorys = getSelectValue("select_category")
                if (tags.length == 0) {
                    window.wxc.xcConfirm("请选择一个标签", window.wxc.xcConfirm.typeEnum.error);
                    return false;
                }
                ;
                if (categorys.length == 0) {
                    window.wxc.xcConfirm("请选择一个分类", window.wxc.xcConfirm.typeEnum.error);
                    return false;
                }
                ;
                $.ajax({
                    dataType: "JSON",
                    url: '/wiki/edit/{{article.id}}/', //请求地址
                    type: "POST",  //提交类似
                    data: {
                        "title": document.getElementById("title").value,
                        "content": CKEDITOR.instances.content.getData(),
                        "tag": tags, /* $('#select_tag option:selected').val(), */
                        "category": $('#select_category option:selected').val(),
                    }, //提交参数
                    success: function (response) {
                        if (response["code"] == "200") {
                            window.wxc.xcConfirm("文章修改成功", window.wxc.xcConfirm.typeEnum.success);
                            /*            	location.reload();  */
                        }
                        else {
                            window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
                        }
                        ;
                    },
                    error: function (response) {
                        window.wxc.xcConfirm("文章修改失败", window.wxc.xcConfirm.typeEnum.error);
                    }
                })
            }

            function addWikiData(obj, op) {
                var btnObj = $(obj);
                btnObj.attr('disabled', true);
                var post_data = {};
                if (op == "tag") {
                    var putUrl = '/api/wiki/tag/';
                    var form = document.getElementById('tag');
                }
                else if (op == "category") {
                    var putUrl = '/api/wiki/category/';
                    var form = document.getElementById('category');
                }
                for (var i = 0; i < form.length; ++i) {
                    var name = form[i].name;
                    var value = form[i].value;
                    if (value.length == 0) {
                        window.wxc.xcConfirm("请注意必填项不能为空~", window.wxc.xcConfirm.typeEnum.error);
                        btnObj.removeAttr('disabled');
                        return false;
                    }
                    else {
                        post_data[name] = value;
                    }
                    ;

                }
                ;
                $.ajax({
                    dataType: "JSON",
                    url: putUrl, //请求地址
                    type: "POST",  //提交类似
                    data: post_data, //提交参数
                    success: function (response) {
                        btnObj.removeAttr('disabled');
                        window.wxc.xcConfirm("添加成功", window.wxc.xcConfirm.typeEnum.success);
                        /* 				location.reload();	 */
                    },
                    error: function (response) {
                        btnObj.removeAttr('disabled');
                        window.wxc.xcConfirm("添加失败", window.wxc.xcConfirm.typeEnum.error);
                        /* 	    		location.reload(); */
                    }
                })
            }
        </script>

{% endblock %}